
function drawTimeShaft(canvas,duration){
    var ctx=canvas.getContext('2d');
    ctx.strokeStyle="#565656";
    ctx.lineWidth=1;



    var widthPerSecond=(canvas.width-100)/duration;
    console.log(widthPerSecond+"***********")

    for(var i=0;i<=duration;i++){
        for(var j=0;j<50;j++){
            ctx.beginPath();
            ctx.moveTo(50+i*widthPerSecond+j*(widthPerSecond/10),canvas.height);
            ctx.lineTo(50+i*widthPerSecond+j*(widthPerSecond/10),canvas.height-5);
            ctx.closePath();
            ctx.stroke();
        }
        ctx.beginPath();
        ctx.moveTo(50+i*widthPerSecond,canvas.height);
        ctx.lineTo(50+i*widthPerSecond,canvas.height-15);
        ctx.closePath();
        ctx.stroke();
    }
}
function drawTimeTag(canvas,duration){
    var ctx=canvas.getContext('2d');
    ctx.fillStyle="#1599c0";
    ctx.lineWidth=1;
    ctx.font='14px sans-serif'

    var widthPerSecond=(canvas.width-100)/duration;

    for(var i=0;i<=duration;i++){
        ctx.fillText(i,50+i*widthPerSecond-5,15)
    }
}
function drawAmplitude(canvas,pos,amp){
    var ctx=canvas.getContext('2d');
    ctx.strokeStyle="#afafaf";
    ctx.lineWidth=1;
    var length=canvas.height*2/3;
    var percent=amp/120;
    var dlength=percent*length;
    ctx.beginPath();
    ctx.moveTo(50+pos,(canvas.height-dlength)/2);
    ctx.lineTo(50+pos,(canvas.height-dlength)/2+dlength);
    ctx.closePath();
    ctx.stroke();

}
